<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 15:32:14
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="content">
      <div class="card1">
        <p>系统概览</p>
        <el-divider />
        <p>累计发表了<span>{{lengths.article}}</span>篇文章</p>
        <el-divider />
        <p>累计发表了<span>{{lengths.classes}}</span>篇分类</p>
        <el-divider />
        <p>累计发表了<span>{{lengths.tag}}</span>篇标签</p>
        <el-divider />
        <p>累计发表了<span>{{lengths.file}}</span>篇文件</p>
        <el-divider />
         <p>累计发表了<span>{{lengths.comment}}</span>篇评论</p>
        <el-divider />
      </div>
      <div class="card2">
        <p>个人资料</p>
        <el-divider />
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本设置" name="first">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              <el-icon v-else><User /></el-icon>
            </el-upload>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="账户名" prop="name">
                <el-input v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="user.email"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="更新密码" name="fourth">
            <div class="passBox">
              <p style="margin: 20px">
                原密码:
                <el-input
                  style="width: 350px"
                  v-model="oldPass"
                  type="password"
                  placeholder="请输入原密码"
                  show-password
                  @click="clickFn"
                />
              </p>
              <p style="margin: 20px">
                新密码:
                <el-input
                  style="width: 350px"
                  v-model="newPass"
                  type="password"
                  placeholder="请输入新密码"
                  show-password
                />
              </p>
              <p style="margin: 20px">
                确认密码:
                <el-input
                  style="width: 350px"
                  v-model="confirmPass"
                  type="password"
                  placeholder="请确认密码"
                  show-password
                />
              </p>
            </div>
            <el-button type="primary" @click="update"
              >更新</el-button
            >
          </el-tab-pane>
        </el-tabs>
        <!-- {{this.lengths}} -->
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage ,InfoFilled} from "element-plus";

import { mapMutations } from "vuex";
import { User } from "@element-plus/icons-vue";
import { asyncUpdate } from '../api/system' 
// import { asyncArticleLists} from '../api/articleList';
// import { asyncClassLists } from '../api/classLists'
// import {asyncTagLists } from '../api/tagLists';
import { totalLength } from '../api/lengths'
export default {
  components: {
    User,
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      activeName: "first",
      imageUrl: "",
      ruleForm: {
        name: "",
        email: "",
      },
      oldPass: "",
      newPass: "",
      confirmPass: "",
      rules: {
        name: [{ required: true, message: "请输入账户名", trigger: "blur" }],
        email: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      // 拿到用户信息
      user: {
        username: JSON.parse(localStorage.getItem("user")).username || "",
        email: JSON.parse(localStorage.getItem("user")).email || "",
        id:JSON.parse(localStorage.getItem("user")).id || "",
        password: JSON.parse(localStorage.getItem("user")).password || "",
      },
      lengths:[]
    };
  },
  created() {
    this.init();
    this.getLengths()
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
      
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file);
    },
    clickFn(){
      this.oldPass=this.user.password;
    },
    async getLengths(){
      const res=await totalLength('/lengths');
      console.log(res)
      this.lengths=res.data
    },
   async update() {
      if(this.oldPass===''||this.newPass===''){
         ElMessage({
          message: "内容不能为空",
          type: "error",
        });
      }else{
         if(this.oldPass!==this.user.password){
        ElMessage({
          message: "密码不正确",
          type: "success",
        });
      }else{
        
        const res=await asyncUpdate('/update',{ oldPass:this.oldPass,newPass:this.newPass,id:this.user.id});
          // console.log(res,'gggg')
       ElMessage({
          message: "更新成功",
          type: "success",
        });
      }
      }
     
      
    },
  },
};
</script>
<style scoped>
.content {
  display: flex;
  /* flex-direction: column; */
}
.card1,
.card2 {
  width: 45%;
  background: #fff;
  margin: 20px;
  padding: 10px;
}
.passBox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
</style>